<template>
	<div>
		<!-- 导航部分开始 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>主数据</el-breadcrumb-item>
			<el-breadcrumb-item>计量单位</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 导航部分结束 -->

		<!--  搜索栏开始 -->
		<el-form style="margin-top: 15px;" :inline="true" :model="queryItem" class="demo-form-inline">

			<el-form-item label="单位编码">
				<el-input v-model="queryItem.measureCode" placeholder="请输入单位编码" clearable />
			</el-form-item>
			<el-form-item label="单位名称">
				<el-input v-model="queryItem.measureName" placeholder="请输入单位名称" clearable />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="loadItems">搜索</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="reLoad">重置</el-button>
			</el-form-item>
		</el-form>
		<!--  搜索栏结束 -->
		<!-- 工具栏开始 -->
		<div class="flex">	
			<el-button title="新增单位" @click="addMeasureFront" type="primary"><el-icon>
					<Plus />
				</el-icon></el-button>
			<el-button @click="handlerEditItems" title="编辑选中单位" type="primary"><el-icon>
					<EditPen />
				</el-icon></el-button>
			<el-button @click="handlerDeleteItems" title="删除选中单位" type="primary"><el-icon>
					<Delete />
				</el-icon></el-button>
		</div>
		<!-- 工具栏结束 -->
		<!-- 表格 开始 -->
		<el-table ref="itemTable" :data="items" max-height="800px" stripe="true" border="true"
			style="width: 100%;margin-top: 10px;">
			<el-table-column align="center" type="selection" width="55" />
			<el-table-column align="center" label="单位编码" property="measureCode"/>
			<el-table-column align="center" label="单位名称" property="measureName" />
			<el-table-column align="center" label="是否是主单位" property="primaryFlag">
				<template #default="scope">
					<!-- scope.row 就是整行数据-->
					<el-tag v-if="scope.row.primaryFlag == 'Y'" class="ml-2" type="success">是</el-tag>
					<el-tag v-else class="ml-2" type="danger">否</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" label="与主单位换算比例" property="changeRate" />
			<el-table-column align="center" label="是否启用" property="enableFlag">
				<template #default="scope">
					<!-- scope.row 就是整行数据-->
					<el-tag v-if="scope.row.enableFlag == 'Y'" class="ml-2" type="success">是</el-tag>
					<el-tag v-else class="ml-2" type="danger">否</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" label="备注" property="remark"></el-table-column>
			<el-table-column width="200" align="center" label="操作">
				<template #default="scope">
					<el-button size="small" @click="handleEdit(scope.row)">修改</el-button>
					<el-popconfirm confirm-button-text="是" cancel-button-text="点错了" @confirm="handleDelete(scope.row)"
						title="您是否要删除这行数据">
						<template #reference>
							<el-button size="small" type="danger">删除</el-button>
						</template>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>
		<!-- 表格 结束 -->
		<!-- 分页栏开始 -->
		<el-pagination style="margin-top: 15px;" :page-size="itemLimit" :pager-count="itemMaxPage"
			@current-change="changePage" background layout="prev, pager, next" :total="itemTotal" />
		<!-- 分页栏结束 -->
		<!-- 修改物料的弹窗窗体开始-->
		<el-dialog v-model="itemEditDrawer" title="修改单位" width="700" align-center>
			<!-- 添加用户的表单 -->
			<el-form label-width="120px" :model="editItem" style="max-width: 460px">
				<el-form-item label="单位编码" >
					<el-input v-model="editItem.measureCode" placeholder="请输入单位编码"/>
				</el-form-item>
				<el-form-item label="单位名称">
					<el-input v-model="editItem.measureName" placeholder="请输入单位名称"/>
				</el-form-item>		
				<el-form-item label="是否是主单位">
					<el-radio-group v-model="editItem.primaryFlag" class="ml-4">
						<el-radio label="N" size="large">否</el-radio>
						<el-radio label="Y" size="large">是</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item v-if="this.editItem.primaryFlag == 'N'" label="主单位">
					<el-select v-model="editItem.primaryId" class="m-2" placeholder="请选择单位"
						>
						<el-option v-for="item in measures" :key="item.measureId"
							:label="item.measureName" :value="item.measureId" />
					</el-select>
				</el-form-item>
				<el-form-item v-if="this.editItem.primaryFlag == 'N'" label="与主单位换算比例" label-width="130px">
				    <el-input-number v-model="editItem.changeRate" :min="1" :max="10000"  />
				</el-form-item>
				<el-form-item label="是否启用">
					<el-radio-group v-model="editItem.enableFlag" class="ml-4">
						<el-radio label="N" size="large">否</el-radio>
						<el-radio label="Y" size="large">是</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="备注">
					<el-input type="textarea" :rows="3" v-model="editItem.remark" placeholder="请输入内容" />
				</el-form-item>
			</el-form>
						<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" @click="doEditMeasure">确定</el-button>
					<el-button @click="cancelEditMeasure">取消</el-button>
					
				</span>
			</template>
		</el-dialog>
		<!-- 修改物料的弹窗窗体结束-->

		<!-- 添加单位的弹窗窗体开始-->
		<el-dialog v-model="addItemDialogVisible" title="添加单位" width="600" align-center>
			<!-- 添加用户的表单 -->
			<el-form label-width="100px" :model="newItem" style="max-width: 460px">
				<el-form-item label="单位编码" >
					<el-input v-model="newItem.measureCode" placeholder="请输入单位编码"/>
				</el-form-item>
				<el-form-item label="单位名称">
					<el-input v-model="newItem.measureName" placeholder="请输入单位名称"/>
				</el-form-item>		
				<el-form-item label="是否是主单位">
					<el-radio-group v-model="newItem.primaryFlag" class="ml-4">
						<el-radio label="N" size="large">否</el-radio>
						<el-radio label="Y" size="large">是</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item v-if="this.newItem.primaryFlag == 'N'" label="主单位">
					<el-select v-model="newItem.primaryId" class="m-2" placeholder="请选择单位"
						>
						<el-option v-for="item in measures" :key="item.measureId"
							:label="item.measureName" :value="item.measureId" />
					</el-select>
				</el-form-item>
				<el-form-item v-if="this.newItem.primaryFlag == 'N'" label="与主单位换算比例" label-width="130px">
				    <el-input-number v-model="newItem.changeRate" :min="1" :max="10000"  />
				</el-form-item>
				<el-form-item label="是否启用">
					<el-radio-group v-model="newItem.enableFlag" class="ml-4">
						<el-radio label="N" size="large">否</el-radio>
						<el-radio label="Y" size="large">是</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="备注">
					<el-input type="textarea" :rows="3" v-model="newItem.remark" placeholder="请输入内容" />
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" @click="doAddItem">确定</el-button>
					<el-button @click="cancelAddItem">取消</el-button>
					
				</span>
			</template>
		</el-dialog>
		<!-- 添加单位的弹窗窗体结束-->

	</div>
</template>
<script>
	import measureRequest from '../../../api/mdUnitMeasure-api.js';
	export default {
		data() {
			return {
				queryItem: {}, // 分装查询字典条件的字典对象
				items: [], // 字典数据列表
				itemCurrPage: 1, // 字典分页的当前页码
				itemLimit: 10, // 字典分页的每页大小
				itemTotal: 0, // 字典列表的总条数
				itemMaxPage: 1, // 字典列表的最大页码
				measures: [],	//添加单位和修改单位中 主单位选择下拉框数据

				// 新增物料相关属性
				addItemDialogVisible: false, // 新增字典的弹窗标志
				newItem: {}, // 封装新增的字典信息
				currItem: {}, // 保存正在操作的字典信息

				//编辑物料相关属性
				itemEditDrawer: false,
				editItem: {},
			}
		},
		methods: {
			/**
			 * 点击新增按钮前的操作
			 */
			addMeasureFront(){
				this.addItemDialogVisible = true;
				this.getAllMeasures();
			},
			/**
			 * 获取所有的单位
			 */
			getAllMeasures() {
				measureRequest.getAllMeasure(res => {
					this.measures = res.data;
				});
			},
			/**
			 * 取消修改单位
			 */
			cancelEditMeasure(){
				this.itemEditDrawer=false;
				this.editItem={};
			},
			/**
			 * 确定修改单位
			 */
			doEditMeasure(){
            // console.log("开始编辑")
            // 提交editUser即可
            measureRequest.edit(this.editItem, res => {
                console.log("*******")
                // 这里的res就是我们的后端返回的perResult对象
                if (res.code == '200') {
                    this.$message({
                        message: '修改单位成功',
                        type: 'success'
                    });
                    //关闭窗体
                    this.itemEditDrawer = false;
                    // 重新加载数据
                    this.loadItems();
                    // 将editUser制空
                    this.editItem = {};
                } else if (res.code == '300') {
                    this.$message({
                        message: '单位重复',
                        type: 'warning',
                    });
                } else {
                    this.$message({
                        message: '修改失败',
                        type: 'error',
                    });
                }
            });
        },
			/**
			 * 重置物料表单
			 */
			reLoad() {
				this.queryItem = {};
				this.loadItems();
			},
			/**
			 * 新增字典的提交按钮事件
			 */
			doAddItem() {
				// 数据校验：略
				// 提交数据
				measureRequest.save(this.newItem, res => {
					if (res.code == 200) {
						this.$message({
							type: "success",
							message: "保存成功"
						});
						// 关闭窗体
						this.cancelAddItem();
						// 重新加载数据
						this.loadItems(); // 加载当前页
					} else if (res.code == 300) {
						this.$message({
							type: "warning",
							message: res.msg
						});
					} else {
						this.$message({
							type: "error",
							message: "保存失败"
						});
					}
				});
			},
			/**
			 * 取消新增字典的按钮事件
			 */
			cancelAddItem() {
				// 关闭窗体
				this.addItemDialogVisible = false;
				// 清空newDict
				this.newItem = {};
			},
			/**
			 * 行删除事件
			 * @param {} row 
			 */
			handleDelete(row) {
				measureRequest.delete(row.measureId, res => {
					if (res.code == 200) {
						this.$message({
							type: 'success',
							message: '删除成功'
						});
						this.loadItems();
					} else {
						this.$message({
							type: 'error',
							message: '删除失败'
						})
					}
				});
			},
			/**
			 * 行编辑事件
			 * @param {*} row 
			 */
			handleEdit(row) {
				this.getAllMeasures();
				measureRequest.get(row.measureId, res => {
					this.itemEditDrawer = true;
					this.editItem = res.data;
				})
			},
			/**
			 * 工具栏-选中删除按钮事件
			 */
			handlerDeleteItems() {
				let table = this.$refs.itemTable;
				let selectionRows = table.getSelectionRows();
				if (selectionRows == undefined || selectionRows.length == 0) {
					this.$message({
						message: "您没有选中任何行",
						type: "info"
					});
				}
				let itemIds = [];
				selectionRows.forEach(item => {
					itemIds.push(item.itemId);
				});
				measureRequest.deletes(itemIds, res => {
					this.$message({
						type: "success",
						message: "您成功删除了" + res.msg + "个单位"
					});
					this.loadItems();
				})
			},
			/**
			 * 工具栏-选中编辑按钮事件
			 */
			handlerEditItems() {

			},
			/**
			 * 字典列表的翻页函数
			 * @param {} value  最新页码
			 */
			changePage(value) {
				this.itemCurrPage = value;
				this.loadItems();
			},
			/**
			 * 加载字典数据
			 */
			loadItems() {
				measureRequest.list(this.itemCurrPage, this.itemLimit, this.queryItem, res => {
					// 设置数据
					this.items = res.data.list;
					this.itemTotal = res.data.total;
					this.itemMaxPage = res.data.pages;
				});
			}
		},
		mounted() {
			// 默认加载字典数据列表
			this.loadItems();
		}
	}
</script>